<!--  -->
<template>
  <el-row class="userInfo">
    <el-col class="avatar" :span="10">
       <Avatar :size="100" :username="userInfo.username"></Avatar>
    </el-col>
    <el-col :span="14"  v-if="keyArray.length > 0" class="container">
      <template v-for="item in keyArray">
        <vue-typed-js
          :key="item.filterKey"
          :cursorChar="'_'"
          :strings="item.value"
          :typeSpeed="200"
        >
          <h3>
            {{item.label}}
            <span class="typing"></span>
          </h3>
        </vue-typed-js>
      </template>
    </el-col>
  </el-row>
</template>

<script>
import { mapState } from "vuex"
import Avatar from 'vue-avatar'
export default {
  data() {
    return {
      username: 'Admin',
      keyArray: [],
    };
  },
  async created() {
    await this.getUserInfo({ id: this.userInfo.id });
  },
  computed: {
    // 映射state
    ...mapState(["userInfo"])
  },
  methods: {
    async getUserInfo(id) {
      const { data } = await this.$req.user.findUserById(id);
      this.username = data.username;
      this.keyArray = [{
          filterKey: "username",
          label: "用户名",
          value: [data.username],
        },
        {
          filterKey: "age",
          label: "年龄",
          value: [String(data.age)],
        },
        {
          filterKey: "area",
          label: "地区",
          value: [data.area.join('/')],
        },
        {
          filterKey: "date",
          label: "注册时间",
          value: [new Date(data.date).toLocaleString()],
        }]
    }
  },
  components: {
    Avatar
  }
};
</script>
<style lang='scss' scoped>
.userInfo {
  // background: #b4bad2;
  width: 100%;
  height: 100%;
  // text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  .avatar,.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
  }
  .avatar {
    align-items: flex-end;
  }
}
</style>